<template>
  <a-modal
    :visible="visible"
    title="批量导入"
    cancelText="取消"
    okText="确定"
    @ok="submit"
    @cancel="cancel"
    class="title"
  >
    <a-image :src="formState.path"></a-image>
    <div>
      1.<a>点击下载导入数据模板</a>，将要导入的数据填充到数据导入模板文件中
    </div>
    <div>2.选择要导入的数据文件</div>
    <a-upload
      v-model:file-list="fileList"
      name="file"
      :multiple="true"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :headers="headers"
      @change="handleChange"
    >
      <a-button>
        <upload-outlined></upload-outlined>
        选择文件
      </a-button>
    </a-upload>
  </a-modal>
  <!-- <detail :visible="state.visibleDetail" @close="closeDetail" :record="state.recordData"></detail> -->
</template>

<script>
import { message } from "ant-design-vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, ref, watch } from "vue";

// interface FileItem {
//   uid: string;
//   name?: string;
//   status?: string;
//   response?: string;
//   url?: string;
// }

// interface FileInfo {
//   file: FileItem;
//   fileList: FileItem[];
// }

export default defineComponent({
  components: {
    UploadOutlined
  },
  props: {
    visible: {
      type: Boolean
    },
    record: {
      type: Object
    }
  },
  emit: ["close"],
  setup(props, context) {
    watch(props, props => {
      formState.id = props.record.id;
      formState.path = props.record.path;
    });

    const formRef = ref();

    const formState = reactive({
      sort: 0,
      enable: "true"
    });

    const cancel = e => {
      context.emit("close", false);
    };

    const submit = e => {
      context.emit("close", false);
    };

    const tokenKey = localStorage.getItem("token_key");
    const token = localStorage.getItem("token");

    const headers = {
      Authorization: token,
      "Authorization-key": tokenKey
    };
    const handleChange = info => {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    };

    const fileList = ref([]);
    return {
      cancel,
      submit,
      formRef,
      formState,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      fileList,
      headers: {
        authorization: "authorization-text"
      },
      handleChange
    };
  }
});
</script>
<style scoped lang="less">
.ant-modal-body {
  div {
    padding: 10px 0;
  }
}
</style>
